import 'package:flutter/material.dart';
import 'package:flutter_aygsh/base/ChangeIndexEvent2.dart';
import '../base/Constant.dart';
import 'application.dart';

class MyBottomBar extends StatefulWidget {
  final int index;
  final ValueChanged<int> onChanged;

  const MyBottomBar({Key key, this.index = 0, this.onChanged})
      : super(key: key);

  @override
  State<StatefulWidget> createState() {
    return new MyBottomBarState();
  }
}

class MyBottomBarState extends State<MyBottomBar>
    with AutomaticKeepAliveClientMixin<MyBottomBar> {
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    APPLIC.eventBus.on<ChangeIndexEvent2>().listen((event) {
      setState(() {
        _tabIndex = event.index;
      });
    });
  }

  int _tabIndex = 0;
  var tabImages = [
    [
      Image.asset(
        'images/tab_maihuo_nor.png',
        fit: BoxFit.cover,
        width: 22,
        height: 22,
      ),
      Image.asset(
        'images/tab_maihuo_pre.png',
        width: 22,
        height: 22,
        fit: BoxFit.cover,
      )
    ],
    [
      Image.asset(
        'images/tab_fenlei_nor.png',
        width: 22,
        height: 22,
        fit: BoxFit.cover,
      ),
      Image.asset(
        'images/tab_fenlei_pre.png',
        width: 22,
        height: 22,
        fit: BoxFit.cover,
      )
    ],
    [
      Image.asset(
        'images/tab_zhongcao_nor.png',
        width: 22,
        height: 22,
        fit: BoxFit.cover,
      ),
      Image.asset(
        'images/tab_zhongcao_pre.png',
        width: 22,
        height: 22,
        fit: BoxFit.cover,
      )
    ],
    [
      Image.asset(
        'images/tab_gouwuche_nor.png',
        width: 22,
        height: 22,
        fit: BoxFit.cover,
      ),
      Image.asset(
        'images/tab_gouwuche_pre.png',
        width: 22,
        height: 22,
        fit: BoxFit.cover,
      )
    ],
    [
      Image.asset(
        'images/tab_user_nor.png',
        width: 22,
        height: 22,
        fit: BoxFit.cover,
      ),
      Image.asset(
        'images/tab_user_pre.png',
        width: 22,
        height: 22,
        fit: BoxFit.cover,
      )
    ]
  ];

  var appBarTitles = ['买货', '分类', '种草', "购物车", '我的'];

  @override
  Widget build(BuildContext context) {
    return new BottomNavigationBar(
      backgroundColor: white,
      items: <BottomNavigationBarItem>[
        new BottomNavigationBarItem(icon: getTabIcon(0), title: getTabTitle(0)),
        new BottomNavigationBarItem(icon: getTabIcon(1), title: getTabTitle(1)),
        new BottomNavigationBarItem(icon: getTabIcon(2), title: getTabTitle(2)),
        new BottomNavigationBarItem(icon: getTabIcon(3), title: getTabTitle(3)),
        new BottomNavigationBarItem(icon: getTabIcon(4), title: getTabTitle(4)),
      ],
      type: BottomNavigationBarType.fixed,
      //默认选中首页
      currentIndex: _tabIndex,
      iconSize: 24.0,
      //点击事件
      onTap: _onTapHandler,
    );
  }

  @override
  // TODO: implement wantKeepAlive
  bool get wantKeepAlive => true;

  /*
   * 根据选择获得对应的normal或是press的icon
   */
  Image getTabIcon(int curIndex) {
    if (curIndex == _tabIndex) {
      return tabImages[curIndex][1];
    }
    return tabImages[curIndex][0];
  }

  /*
   * 获取bottomTab的颜色和文字
   */
  Text getTabTitle(int curIndex) {
    if (curIndex == _tabIndex) {
      return new Text(appBarTitles[curIndex],
          style: new TextStyle(fontSize: 12, color: mainColor));
    } else {
      return new Text(appBarTitles[curIndex],
          style: new TextStyle(fontSize: 12, color: const Color(0xff515151)));
    }
  }

  void _onTapHandler(int index) {
    setState(() {
      _tabIndex = index;
    });
    widget.onChanged(index);
  }
}
